<template>
  <div>
    <div class="header">
      <img src="../assets/title.png">
    </div>
    <div class="registerBox">
      <form>
        <h1>用户注册</h1>
        <span>用户名</span>
        <div class="inputBox">
          <el-input
              placeholder="请输入用户名"
              v-model="input"
              clearable>
          </el-input>
        </div>
        <br>
        <span>密码</span>
        <div class="inputBox">
          <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
        </div>
        <br>
        <span>确认密码</span>
        <div class="inputBox">
          <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
        </div>
        <br>
        <br>
        <el-button type="primary" @click="onRegister">注册</el-button>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Register",
    data() {
      return {
        input: "",
        pwd: "",
      }
    },
    methods: {
      onRegister() {
        this.$router.push("/")
      }
    }
  }
</script>

<style scoped>
  .registerBox {
    width: 500px;
    height: 300px;
    border: 10px solid #553201;
    border-radius: 30px;
    background-color: rgb(246, 239, 201);
    margin: 0px auto;
  }

  .inputBox {
    display: inline-block;
    width: 200px;
  }
  span{
    display: inline-block;
    width: 80px;
  }
</style>